$default-font-size: 12px !default;
$font-size-number: 12;
$text-color: #3d3d3d !default;
$default-border-width: 2px;
$normal-border-color: #929292;
$normal-hover-border-color: #828282;
$checked-border-color: #0083BA;
$checked-hover-border-color: #00AAF1;
$disabled-color: #D1D1D1;

cc-checkbox{
  display: inline-block;

  * {
	box-sizing: border-box;
  }
}

.cc-checkbox{
  font-size: $default-font-size;
  display: flex;
  align-items: center;

  &:hover{
	cursor: pointer;

	.cc-checkbox-input{
	  border-color: $normal-hover-border-color;
	}
  }

  .cc-checkbox-input {
	border: solid 1px $normal-border-color;
	border-radius: $default-border-width;
	position: relative;
	width: 16px;
	height: 16px;
	margin-right: 12px;

	&:before{
	  position: absolute;
	  content: '';
	  display: block;
	}
  }

  .cc-checkbox-label{
	white-space: nowrap;
	color: $text-color;
  }
}

.cc-checkbox.checked{
  &:hover{
	.cc-checkbox-input{
	  border-color: $checked-hover-border-color;

	  &:before{
		border-color: $checked-hover-border-color;
	  }
	}
  }

  .cc-checkbox-input{
	border-color: $checked-border-color;

	&:before{
	  width: 4px;
	  height: 8px;
	  transform: rotate(45deg);
	  border-width: $default-border-width;
	  border-style: solid;
	  border-color: $checked-border-color;
	  border-left: 0;
	  border-top: 0;
	  left: 4px;
	  top: 1px;
	}
  }
}

.cc-checkbox.indeterminate{
  &:hover{
	.cc-checkbox-input{
	  border-color: $checked-hover-border-color;

	  &:before{
		border-color: $normal-hover-border-color;
	  }
	}
  }

  .cc-checkbox-input{
	border-color: $checked-border-color;

	&:before{
	  width: 0;
	  height: 0;
	  transform: rotate(0deg);
	  border: (4 / $font-size-number) + em solid $normal-border-color;
	  left: (3 / $font-size-number) + em;
	  top: (3 / $font-size-number) + em;
	}
  }
}

.cc-checkbox.disabled{
  &:hover{
	cursor: default;

	.cc-checkbox-input{
	  border-color: $disabled-color;

	  &:before{
		border-color: $disabled-color;
	  }
	}
  }

  .cc-checkbox-input{
	border-color: $disabled-color;

	&:before{
	  border-color: $disabled-color;
	}
  }

  .cc-checkbox-label{
	color: $disabled-color;
  }
}
